"use client"
import { FlipBook } from "@yj/pagefilp-plus"
import { useRef, useState } from "react"
import bookJson from "./assets/book-3-4.json"

function App() {
  const [isShowPreview, setIsShowPreview] = useState(false)
  const pagesButtonRef = useRef(null)
  return (
    <>
      <div className="flex h-dvh justify-between space-x-5">
        <div className="flex h-full flex-1 shrink-0 flex-col items-center justify-center overflow-hidden">
          <div className="relative z-20 h-10 w-full">
            <button
              className="cursor-pointer rounded-[1rem] border border-[#E5E5E5] bg-white px-[1.88rem] py-3 text-[#7541CB]"
              onClick={() => {
                setIsShowPreview(!isShowPreview)
              }}
              ref={pagesButtonRef}
            >
              Pages
            </button>
          </div>
          <FlipBook
            className="p-10"
            isShowPreview={isShowPreview}
            pages={bookJson}
            pagesButtonRef={pagesButtonRef}
            setting={{
              backgroundImage: {
                backdropBlur: 1,
                // url: 'https://w.wallhaven.cc/full/d6/wallhaven-d6y12l.jpg',
                url: "https://static-res.readkidz.com/upload/202504/16/01912413319373811714.webp",
              },
              bg: {
                loop: true,
                url: "https://d1nyhzuytgmr50.cloudfront.net/asllata/202407/25/01816436084280684546.mp3",
                volume: 0.1,
              },
              pageNumberStyle: "number",
              // spineOfBook: "looseLeaf",
              // texture: "leather1",
            }}
            startPage={1}
          />
        </div>
      </div>
    </>
  )
}

export default App
